// 日创巡查--台账
import React, { useState } from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import '../../../css/oper_inspertion/tauzhan.less';
import * as XLSX from 'xlsx';

interface DataType {
    [key: string]: any;
}

interface ColumnType {
    dataIndex?: string;
    title?: string;
}

const columns: TableColumnsType<DataType> = [
    {
        title: '工作名称',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
        width: 150,
    },
    {
        title: '检查部位',
        dataIndex: 'buwei',
        key: 'buwei',
        width: 80,
    },
    {
        title: '检查事件',
        dataIndex: 'address',
        key: 'address',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
    },
    {
        title: '检查时间',
        dataIndex: 'timer',
        key: 'timer',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
    },
    {
        title: '检查结果',
        dataIndex: 'rusult',
        key: 'rusult',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
        render: (text) => {
            if (text === '正常') {
                return <span style={{ color: '#00FF00' }}>{text}</span>;
            } else {
                return <span style={{ color: '#FF0000' }}>{text}</span>;
            }
        }
    },
    {
        title: '关联设备',
        dataIndex: 'shebei',
        key: 'shebei',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
    },
    {
        title: '隐患描述',
        dataIndex: 'yinhuan',
        key: 'yinhuan',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
    },
    {
        title: '处理结果',
        dataIndex: 'chuli',
        key: 'chuli',  // 修改 key 值
        ellipsis: {
            showTitle: false,
        },
    },
];


const data: DataType[] = [
    {
        key: '1',
        // name: '划船墙机',
        buwei: '点位1',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '正常',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',
    },
    {
        key: '2',
        name: '划船墙机',
        buwei: '点位2',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '正常',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',
    },
    {
        key: '3',
        // name: '划船墙机',
        buwei: '点位3',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '正常',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',
    },
    {
        key: '4',
        // name: '山峰沃机埠',
        buwei: '点位4',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '隐患',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',
    },
    {
        key: '5',
        name: '山峰沃机埠',
        buwei: '点位5',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '正常',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',
    },
    {
        key: '6',
        // name: '山峰沃机埠',
        buwei: '点位6',
        address: '1.划船墙机开关是否正常,2.划船墙机是否正常工作',
        timer: '2022-05-01 15:00',
        rusult: '隐患',
        shebei: '3号闸门',
        yinhuan: '无',
        chuli: '无',

    }
];

const App: React.FC = () => {
    const [dataSource, setDataSource] = useState(data);  // 初始化 dataSource 为 data



    // 导出 Excel 的函数
    const exportXlsx = () => {
        // 创建一个新的工作簿（workbook）
        const workbook = XLSX.utils.book_new();
        // 将 dataSource（数据源）转为二维数组格式，适合导出到 Excel
        const data = dataSourceToData(dataSource, columns);
        // 将二维数组数据转换为 Excel 工作表（worksheet）
        const worksheet = XLSX.utils.aoa_to_sheet(data);
        // 将工作表（worksheet）添加到工作簿中，工作表命名为 'Sheet1'
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
        // 导出为文件，文件名为 'file5.xlsx'，并指定文件类型为 'xlsx'
        XLSX.writeFile(workbook, 'file5.xlsx', { bookType: 'xlsx' });
    };
    // 将 dataSource 转换为二维数组格式，以便导出到 Excel
    const dataSourceToData = (ds: DataType[], cols: TableColumnsType<DataType>) => {
        // 获取列的索引（dataIndex），并过滤掉空值的列
        const columns = cols.map((item: any) => item.dataIndex).filter(Boolean);
        // 获取列的标题（title），并过滤掉空值的列
        const tHead = cols.map((item: any) => item.title).filter(Boolean);
        // 定义一个空的二维数组，用来存储最终的 Excel 数据
        const list: string[][] = [];
        // 将列标题作为 Excel 表格的表头（tHead）
        list.push(tHead);
        // 遍历数据源（dataSource），为每一行数据构建一行（row）
        ds.forEach((item: DataType) => {
            // 将每一行的值按列进行映射，如果没有值则默认为空字符串
            const row = columns.map(col => String(item[col] || ''));
            // 将该行数据添加到二维数组中
            list.push(row);
        });
        // 返回转换后的二维数组（即 Excel 的表格数据）
        return list;
    };

    return (
        <>
            <div className='box'>
                <div className='box1'>
                    <p className='p1'>上浦闸灌灌区巡查详情</p>
                    <div>
                        <button className='btn' onClick={exportXlsx}>导出</button>
                    </div>
                </div>
                <div className='box2'>
                    <span>天气:晴</span>
                    <span>巡查时间:5分21秒</span>
                </div>
            </div>
            <Table columns={columns} dataSource={dataSource} pagination={false} />
        </>
    );
}

export default App;